<template>
  <div class='pages-details'>
    <!---------------操作框-------------------------------------------------------------------------------------------------------->
<!--    <div class="tableSearch"></div>-->
    <!---------------表单----------------------------------------------------------------------------------------------------------->
    <el-form :model="formData" :rules="ruleFormData" class="demo-ruleForm" label-width="120px" ref="dataForm"
             size="small">
      <el-form-item label='应用端：' prop='applyCode'>
        <el-checkbox-group v-model="formData.applyCode">
          <el-checkbox v-for='(item, index) in applyList' :label="item.id" :key='index'>{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label='阅读对象：' prop='readersCode' v-if='formData.applyCode.indexOf("2") != -1'>
        <el-checkbox-group v-model="formData.readersCode">
          <el-checkbox v-for='(item, index) in readersList' v-if='item.typeId != "3333333333"' :label="item.typeId" :key="index">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="知识分类：" prop="knowledgeTypeId">
        <el-select placeholder="请选择" size="small" v-model="formData.knowledgeTypeId"
                   style='width: 260px'>
          <el-option :key="index" :label="item.name" :value="item.id"
                     v-for="(item, index) in knowledgeTypeList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文章类型：" prop="postType" required>
        <el-radio-group v-model="formData.postType" @change='radioChange($event)'>
          <el-radio v-for='(item, index) in postTypeList' :key='index' :label="index">{{item}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="封面：" prop="coverUrl">
        <p class='tips'>上传图片的尺寸{{imgWith}}px * {{imgHeight}}px，格式png，jpeg，jpg，gif。</p>
        <div class="imgbox"><img :src="formData.coverUrl" alt=""></div>
        <div class='loadWrap' v-if='handle != "see"'>
          <el-upload :before-upload="beforeAvatarUpload" :http-request="uploadSectionFile" :show-file-list="false"
                     action="1" class="upload-demo">
            <el-button @click="addindex('coverUrl')" size="mini" type="primary">点击上传</el-button>
          </el-upload>
          <el-form-item>
            <el-button @click="deleteImg('coverUrl')" key='imgUrl' size="mini" type="danger">删 除
            </el-button>
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="知识标题：" prop="title" class='knowledge-title'>
        <el-input show-word-limit maxlength="32" placeholder="32字以内" v-model="formData.title" clearable
                  :disabled='handle == "see"'></el-input>
      </el-form-item>
      <el-form-item label="列表内容：" prop="listContent" class='knowledge-title'>
        <el-input show-word-limit maxlength="16" placeholder="16字以内" v-model="formData.listContent"
                  :disabled='handle == "see"'
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="content" style='width: 800px' key='courseContent' v-if='formData.postType === 0'>
        <div class='editor-container' v-if='handle == "new" || isFinished'>
          <wangeditor :catchContent.sync="formData.content" @clearValidate='clearValidate("content")'
                      :keys.sync='keys' :wordscount.sync='contentLen' :maxLen='maxLen'></wangeditor>
          <el-button type="info" plain size='mini' @click='previewBtn(formData.content)' style='margin-left: 15px'>
            预览
          </el-button>
        </div>
      </el-form-item>
      <!------------音频---------------->
      <div class='audio-lists' v-if='formData.postType === 1'>
        <el-row style='display: flex;justify-content: flex-start'>
          <el-form-item class='course-price knowledge-title' label="添加音频：" prop="audioName">
            <el-input placeholder='上传本地音频文件或输入音频URL地址' v-model="formData.audioName" clearable
                      :disabled='formData.hasLoadAudio'></el-input>
          </el-form-item>
          <el-col :span='6' style='display: flex;justify-content: flex-start' v-if='handle != "see"'>
            <el-form-item label-width='15px'>
              <el-upload :before-upload="beforeAvatarUploadAudio" :http-request="uploadSectionAudio"
                         :show-file-list="false"
                         action="1" class="upload-demo">
                <el-button key='selectfile' size='mini' type="primary">选择文件</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label-width='15px'>
              <el-button @click='resetSoundUrl()' key='reset' size='mini' type="danger">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <p class='tips'>格式支持mp3、wav、m4a，语音时长不超过30分钟</p>
        </el-form-item>
        <el-form-item label="音频文字：" prop="content" style='width: 800px'>
          <div class='editor-container' v-if='handle == "new" || isFinished'>
            <wangeditor :catchContent.sync="formData.content" @clearValidate='clearValidate("content")'
                        :keys.sync='keys'></wangeditor>
            <el-button type="info" plain size='mini' @click='previewBtn(formData.content)'
                       style='margin-left: 15px'>预览
            </el-button>
          </div>
        </el-form-item>
      </div>
      <el-form-item label='设置权重：' prop='weight'>
        <el-input v-model='formData.weight' placeholder='请输入权重值' style='width: 260px' maxlength='5'
                  @keyup.native='replace(formData,"weight")'></el-input>
      </el-form-item>
      <el-form-item label=''>
        <p class='tips'>权重值越大，排序越靠前，权重值为正整数，可输入范围：0—10000</p>
      </el-form-item>
      <div class='footer'>
        <el-button @click="openDialog(2)" plain type="primary">返回</el-button>
        <el-button @click='saveFormData(1)' key='save' type="primary" v-if='formData.state != 0'>保存草稿</el-button>
        <el-button @click='saveFormData(0)' key='release' type="primary">发布知识</el-button>
      </div>
    </el-form>
    <!-------------------弹框----------------------------------------------------------------------------------------->
    <el-dialog :show-close='false' :title="dialogType == 0 ? '确认发布' : '确认关闭'" :visible.sync="dialogVisible" center
               width="410px">
      <h4 style='text-align: center;padding: 20px 0;' v-if='dialogType == 0'>确认发布该条知识吗？</h4>
      <h4 style='text-align: center;padding: 20px 0;' v-else>您确认要离开该页面吗，您输入的数据可能不会被保存？</h4>
      <div slot="footer" style='text-align: center'>
        <el-button @click="closedialog">取消</el-button>
        <el-button @click="confirmdialog" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-------------------预览弹框----------------------------------------------------------------------------------------->
    <el-dialog title="预览" :visible.sync="dialogPreviewVisible" width="375px" class='preview-dialog'>
      <div class='preview-container'>
        <div v-html='previewHtml'></div>
      </div>
    </el-dialog>
    <!--------------------audio获取时长---------------------------------------------------------------------------------->
    <audio :src='audio' style='display: none' id='audioModel'></audio>
  </div>
</template>

<script>
  import util from '@/util'
  import {mapState} from 'vuex'
  import wangeditor from '../../../../components/wangeditor'
  import {
    uploadFile,
    getFile,
    getvideoFile,
    findEmployeeTypeList,
    findKnowledgeClassificationListPage,
    insertKnowledge,
    updateKnowledge,
    selectKnowledge
  } from '@/api'

  export default {
    name: 'knowladge-details',
    data () {
      const checkPriorityRating = (rule, value, callback) => {
        if (+value > 10000) {
          return callback(new Error('超过输入范围'))
        } else {
          callback()
        }
      }
      return {
        keys: 0,
        applyList: [{
          name: '老板端',
          id: '1'
        }, {
          name: '员工端',
          id: '2'
        }],
        contentLen: 0,
        maxLen: 2000, //富文本字数限制
        readersList: [], //阅读对象
        operateStatus: 0, //0 保存  1发布
        imgIndex: '', //图片key
        dialogType: 0, //0确认发布  2 确认关闭
        dialogVisible: false, //弹框
        dialogPreviewVisible: false, // 预览弹框
        previewHtml: '', // 预览内容
        handle: '',
        targetId: '', //课程id
        imgWith: 220, //图片尺寸宽
        imgHeight: 162, //图片尺寸高
        postTypeList: ['图文', '音频'], //内容种类列表
        audio: '', //通过audio获取音频时长
        //图文数据
        imgTxtData: {
          id: '',
          title: '',      //标题
          listContent: '',
          weight: null, //权重
          coverUrl: '',     //封面
          knowledgeTypeId: '', //课程分类
          postType: 0,   //类型  0-图文 1-音频
          content: '',    //内容
          applyCode: [], //应用端
          readersCode: [], //阅读对象
          audioName: '',
          hasLoadAudio: false
        },
        //音频数据
        audioData: {
          id: '',
          title: '',      //课程标题
          listContent: '',
          weight: null, //权重
          coverUrl: '',     //封面
          knowledgeTypeId: '', //课程分类
          postType: 1,   //课程类型  0-图文 1-音频 2-专辑
          content: '',    //课程内容
          applyCode: [], //应用端
          readersCode: [], //阅读对象
          audioName: '',
          hasLoadAudio: false
        },
        formData: {
          applyCode: [], //应用端
          readersCode: [], //阅读对象
          weight: null, //权重
          id: '',
          title: '',      //标题
          listContent: '',
          coverUrl: '',     //封面
          knowledgeTypeId: '', //课程分类
          postType: 0,   //类型  0-图文 1-音频
          content: '',    //内容
          audioName: '',
          hasLoadAudio: false, // 输入框禁止
        },
        ruleFormData: {
          title: [{required: true, message: '请输入标题', trigger: 'blur'},
            {validator: util.checkSpace, trigger: 'blur'}],
          listContent: [{required: true, message: '请输入列表内容', trigger: 'blur'},
            {validator: util.checkSpace, trigger: 'blur'}],
          coverUrl: [{required: true, message: '请上传封面', trigger: 'change'}],
          knowledgeTypeId: [{required: true, message: '请选择知识分类', trigger: 'change'}],
          audioName: [{required: true, message: '上传音频', trigger: 'change'}],
          content: [{required: true, message: '此处不能为空', trigger: 'change'}],
          audioUrl: [{required: true, message: '请上传音频文件', trigger: 'blur'}],
          readersCode: [{required: true, message: '请选择阅读对象', trigger: 'change'}],
          applyCode: [{required: true, message: '请选择应用端', trigger: 'change'}],
          weight: [{required: true, message: '请输入权重', trigger: 'blur'},
            {validator: checkPriorityRating, trigger: 'blur'}]
        },
        knowledgeTypeList: [], //知识分类列表
        activeItem: null, // mouseenter事件
        isFinished: false, //查看详情时数据是否加载完成
      }
    },
    components: {
      wangeditor
    },
    computed: mapState([
      'sub',
      'power',
      'merchantId'
    ]),
    created () {
      this.getKnowledgeType()
      this.handle = util.getQuery('handle')
      if (this.handle == 'edit') {
        this.targetId = util.getQuery('targetId')
        this.getDetails()
      }
    },
    mounted () {
      this.findEmployeeList()
    },
    methods: {
      //获取员工列表-----------------------------接口-----------------------
      findEmployeeList () {
        let data = {
          pageSize: 20,
          pageNum: 1,
        }
        findEmployeeTypeList(data).then(res => {
          if (res.code == 200) {
            this.readersList = res.data.list
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      //知识分类列表
      getKnowledgeType () {
        let data = {
          shopId: this.merchantId,
          name: '',
          pageNum: 1,
          pageSize: 10000,
          state: 0
        }
        findKnowledgeClassificationListPage(data).then(res => {
          if (res.code == 200) {
            this.knowledgeTypeList = res.data.list
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      //新增课程
      saveFormData (status) {
        let that = this
        switch (status) {
          //发布
          case 0:
            this.$refs.dataForm.validate((valid) => {
              if (valid) {
                if (that.contentLen > that.maxLen) {
                  that.tipsBox('富文本文字内容不能超过2000字', 'error')
                  return
                }
                this.openDialog(status)
              } else {
                this.tipsBox('请填写完整内容再发布', 'error')
              }
            })
            break
          //保存
          case 1:
            that.setSoundLen().then(() => {
              if (that.contentLen > that.maxLen) {
                that.tipsBox('富文本文字内容不能超过2000字', 'error')
                return
              }
              let data = JSON.parse(JSON.stringify(that.formData))
              data.state = 1
              data.applyCode = data.applyCode.join(',')
              if (that.formData.applyCode.length == 1 && that.formData.applyCode[0] == 1) {
                data.readersCode = ''
              } else {
                data.readersCode = data.readersCode.join(',')
              }
              if (that.targetId) {
                updateKnowledge(data).then(res => {
                  if (res.code == 200) {
                    that.tipsBox('修改成功', 'success')
                    that.routerPush(status)
                  }
                })
              } else {
                data.shopId = that.merchantId
                insertKnowledge(data).then(res => {
                  if (res.code == 200) {
                    that.$message.success('保存成功', 'success')
                    that.routerPush(status)
                  }
                })
              }
            })
            break
        }
      },
      //获取音频时长 --- h5不支持amr、wma格式音频
      getItem (soundUrl) {
        this.audio = soundUrl
        let that = this
        return new Promise(function (resolve, reject) {
          that.$nextTick(function () {
            let dom = document.getElementById('audioModel')
            dom.oncanplaythrough = function () {
              let time = Math.floor(dom.duration).toString()
              resolve(time)
            }
          })
        })
      },
      async setSoundLen () {
        let that = this
        if (that.formData.postType == 1) {
          if (that.formData.audioName == '') {
            that.formData.audioUrl = ''
          } else if (that.formData.audioName != '' && that.formData.audioUrl == '') {
            that.formData.audioUrl = that.formData.audioName
          }
          if (!that.formData.audioLen) {
            let result = await that.getItem(that.formData.audioUrl)
            that.formData.audioLen = result
          }
        }
      },
      //发布课程
      confirmdialog () {
        let that = this
        //发布
        if (this.dialogType == 0) {
          /*-------获取音频时长----------*/
          that.setSoundLen().then(() => {
            let data1 = JSON.parse(JSON.stringify(that.formData))
            data1.state = 0
            data1.applyCode = data1.applyCode.join(',')
            if (that.formData.applyCode.length == 1 && that.formData.applyCode[0] == 1) {
              data1.readersCode = ''
            } else {
              data1.readersCode = data1.readersCode.join(',')
            }
            if (that.targetId) {
              data1.id = that.targetId
              data1.shopId = that.merchantId
              updateKnowledge(data1).then(resupd => {
                if (resupd.code == 200) {
                  this.tipsBox('发布成功', 'success')
                  this.routerPush(0)
                } else {
                  that.tipsBox(resupd.msg, 'error')
                }
              })
            } else {
              data1.shopId = that.merchantId
              insertKnowledge(data1).then(res => {
                if (res.code == 200) {
                  this.tipsBox('发布成功', 'success')
                  this.routerPush(0)
                } else {
                  that.tipsBox(res.msg, 'error')
                }
              })
            }
          })
        } else {
          //返回
          this.back()
        }
      },
      //获取详情
      getDetails () {
        selectKnowledge({
          id: this.targetId
        }).then(res => {
          let datas = res.data
          if (res.code == 200) {
            if (datas.knowledgeTypeId == 0) {
              datas.knowledgeTypeId = ''
            }
            if (datas.applyCode.indexOf(',') != -1) {
              datas.applyCode = datas.applyCode.split(',')
            } else {
              datas.applyCode = new Array(datas.applyCode)
            }
            if (!datas.readersCode) {
              datas.readersCode = []
            } else {
              if (datas.readersCode.indexOf(',') != -1) {
                datas.readersCode = datas.readersCode.split(',')
              } else {
                datas.readersCode = new Array(datas.readersCode)
              }
            }
            if (datas.audioUrl && datas.audioName) {
              datas.hasLoadAudio = true
            } else {
              datas.hasLoadAudio = false
            }
            this.formData = datas
            this.isFinished = true
          } else {
            this.tipsBox(res.msg, 'error')
          }
        })
      },
      /*----------------------------------图片/音频上传----------------------------------------*/
      //添加图片
      addindex (key) {
        this.imgIndex = key
      },
      //删除图片
      deleteImg (key) {
        this.formData[key] = ''
      },
      //音频格式
      beforeAvatarUploadAudio (file) {
        console.log(file)
        const isAudio =
          file.type.search(/mp3/) > 0 ||
          file.type.search(/wav/) > 0 ||
          file.type.search(/m4a/) > 0 ||
          file.name.search(/.mp3/) > 0 ||
          file.name.search(/.wav/) > 0 ||
          file.name.search(/.m4a/) > 0

        // const is30M = file.size / 1024 / 1024 <= 30;
        if (!isAudio) {
          this.$message.error('上传文件格式错误!')
          return false
        }
        // if (!is30M) {
        //   this.$message.error("文件不超过30M!");
        //   return false;
        // }
        return isAudio
      },
      //图片大小格式
      beforeAvatarUpload (file) {
        let that = this
        const isJPG =
          file.type === 'image/png' ||
          file.type === 'image/jpg' ||
          file.type === 'image/jpeg' ||
          file.type === 'image/gif'
        let width, height, isSize

        if (!isJPG) {
          this.$message.error('上传图片格式错误!')
          return false
        }
        isSize = new Promise(function (resolve, reject) {
          width = that.imgWith
          height = that.imgHeight
          let _URL = window.URL || window.webkitURL
          let img = new Image()
          img.onload = function () {
            let valid = img.width == width && img.height == height
            valid ? resolve() : reject()
          }
          img.src = _URL.createObjectURL(file)
        }).then(() => {
          return true
        }, () => {
          this.$message.error(`上传的图片必须是${width}px * ${height}px`)
          return Promise.reject()
        })
        return isJPG && isSize
      },
      //上传
      uploadSectionFile (param) {
        var fileObj = param.file
        var data = new FormData()
        data.append('projectName', fileObj.name)
        data.append('file', fileObj)
        uploadFile(data).then(res => {
          if (res.code == 200) {
            let a = `${getFile}?id=${res.data.id}`
            switch (this.imgIndex) {
              case 'coverUrl':
                this.formData.coverUrl = a
                break
            }
          } else {
            this.tipsBox(res.msg, 'error')
          }
        })
      },
      //上传音频
      uploadSectionAudio (param) {
        let that = this
        var fileObj = param.file
        var data = new FormData()
        data.append('projectName', fileObj.name)
        data.append('file', fileObj)
        uploadFile(data).then(res => {
          if (res.code == 200) {
            // let a = `${getFile}?id=${res.data.id}`;
            this.$set(this.formData, 'audioName', fileObj.name)
            getvideoFile({
              id: res.data.id,
              returnUrlFlag: 1
            }).then(res => {
              this.formData.audioUrl = res
              that.$set(this.formData, 'hasLoadAudio', true)
            })
          } else {
            this.tipsBox(res.msg, 'error')
          }
        })
      },
      /* ---------------------------------------页面操作--------------------------------------*/
      //知识类型切换
      radioChange (val) {
        switch (val) {
          //音频 -> 图文
          case 0:
            this.audioData = JSON.parse(JSON.stringify(this.formData))
            this.audioData.postType = 1         //1 音频类型
            this.formData = JSON.parse(JSON.stringify(this.imgTxtData))
            this.keys = 0
            break
          //图文 -> 音频
          case 1:
            this.imgTxtData = JSON.parse(JSON.stringify(this.formData))
            this.imgTxtData.postType = 0        //0 图文类型
            this.formData = JSON.parse(JSON.stringify(this.audioData))
            this.keys = 1
            break
        }
        if (this.formData.id == '' && this.handle == 'edit') {
          this.formData.id = this.audioData.id == '' ? this.imgTxtData.id : this.audioData.id
        }
        this.$nextTick(function () {
          this.$refs.dataForm.clearValidate()
        })
      },
      //重置音频url
      resetSoundUrl () {
        this.$set(this.formData, 'audioName', '')
        this.formData.audioUrl = ''
        this.formData.hasLoadAudio = false
      },
      //清除验证提示
      clearValidate (item = '') {
        this.$refs['dataForm'].clearValidate([item])
      },
      // 关闭弹框
      closedialog () {
        this.dialogVisible = false
      },
      // 打开弹框
      openDialog (status) {
        if (this.formData.applyCode.length != 0 || this.formData.readersCode.length != 0 || this.formData.coverUrl != '' ||
        this.formData.title != '' || this.formData.listContent != '' || this.formData.content != '' ||
          this.formData.audioName != '' || this.formData.knowledgeTypeId != '' || this.formData.weight) {
          this.dialogType = status
          this.dialogVisible = true
          return
        }
        this.back()
      },
      //字符串过滤
      replace (obj, key) {
        let that = this
        let event = event || window.event
        if (event.keyCode == 13) {
          setTimeout(() => {
            that.validItem(obj, key)
          }, 100)
        } else {
          that.validItem(obj, key)
        }
      },
      validItem (obj, key) {
        let res = ''
        switch (key) {
          case 'weight':
            res = util.replaceNumber(obj[key])
            if (parseInt(res) === 0) {
              res = 0
            }
            break
        }
        this.$set(obj, key, res)
      },
      //路由跳转列表页
      routerPush (status) {
        util.routerTo('/operate-management/knowledge-base/knowledge-list', {
          status: status,
        })
        this.$store.commit('SET_ISRELOADDATA', true)
        return
      },
      //预览弹框
      previewBtn (html) {
        this.dialogPreviewVisible = true
        this.previewHtml = html
      },
      //提示框
      tipsBox (txt, type) {
        this.$message({
          message: txt,
          type: type
        })
      },
      back () {
        util.routerTo('/operate-management/knowledge-base/knowledge-list')
        return
      }
    }
  }
</script>

<style lang='less' scoped>
  .pages-details {
    min-width: 800px;

    .tips {
      color: darkgray;
      line-height: 20px;
    }

    .imgbox {
      min-width: 150px;
      height: 150px;
      border: 1px dashed #dcdfe6;
      margin: 15px 0;
      display: inline-block;

      img {
        display: block;
        width: auto;
        height: 100%;
        margin: 0 auto;
      }
    }

    .loadWrap {
      display: flex;
      justify-content: flex-start;

      .upload-demo {
        margin-right: 15px;
      }
    }

    .knowledge-title {
      width: 650px;
    }

    .footer {
      text-align: center;
      width: 800px;
      margin-top: 20px;
      padding: 30px 0 100px;
    }

    .course-des-imgs {
      border: 1px dashed #dcdfe6;
      height: 200px;
      display: inline-block;
      min-width: 200px;
      max-width: 800px;
      overflow-y: hidden;
      overflow-x: scroll;

      .course-des-imgs-item {
        height: 100%;
        display: flex;
        justify-content: start;

        div {
          position: relative;
          margin-right: 5px;
          height: 100%;

          &:last-child {
            margin-right: 0px;
          }

          img {
            display: block;
            height: 100%;
          }

          span {
            position: absolute;
            background: rgba(0, 0, 0, .7);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
              display: block;
              width: 50px;
              height: 50px;
              font-size: 30px;
              color: #fff;
              cursor: pointer;
              text-align: center;
              line-height: 50px;
            }
          }
        }
      }
    }

    .audio-lists {
      padding-top: 15px;

      .audio-num {
        font-weight: bold;
        margin-right: 20px;
        border: 1px solid #dcdfe6;
        width: 80px;
        text-align: center;
      }

      .audio-lists-group {
        min-width: 900px;
        margin-left: 40px;

        .audio-lists-item {
          margin-bottom: 20px;
          padding-top: 20px;
          background-color: #fff;
          border: 1px dashed #dcdfe6;
          border-radius: 4px;
        }
      }

      .audio-lists-dele {
        display: flex;
        justify-content: space-between;
        padding: 0 25px 10px;

        strong {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          text-align: center;
          line-height: 30px;
          background: #dcdfe6;
        }

        .el-icon-delete {
          &:before {
            font-size: 24px;
            color: #F56C6C;
            cursor: pointer;
          }
        }
      }
    }

    .content-see {
      width: 680px;
      border: 1px solid #ccc;

      .content-container-menus {
        height: 44px;
        text-align: right;
        background-color: #f1f1f1;
        padding: 4px 10px 0 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
      }
    }

    .content-container {
      width: 100%;
      height: 300px;
      box-sizing: border-box;
      padding: 0 15px;
      overflow-x: hidden;
      overflow-y: scroll;

      .content-container-box {
        width: 100%;
        height: auto;
      }
    }

    .editor-container {
      position: relative;

      .el-button {
        position: absolute;
        right: 10px;
        top: 8px;
      }
    }

    .preview-dialog {
      .preview-container {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 600px;
        width: 375px;
        margin: -15px -20px;
        padding: 0px 15px;
        box-sizing: border-box;

        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
</style>
<style scoped>
  .preview-container div >>> img {
    display: block !important;
  }
</style>
<style lang='less'>
  .pages-details {
    .el-dialog__header {
      background: #409EFF;

      .el-dialog__title {
        color: #fff;
      }
    }

    .el-dialog__wrapper {
      z-index: 20000 !important;

      /*.el-dialog__body {*/
      /*  width: 410px;*/
      /*}*/
    }

    .course-price {
      .el-form-item__content {
        display: flex;
        justify-content: flex-start;
      }
    }

    .preview-dialog {
      .el-dialog__header {
        border-top-right-radius: 30px;
        border-top-left-radius: 30px;
      }

      .el-dialog {
        border-radius: 30px;

        .el-icon {
          color: #fff;
        }
      }
    }
  }

  .el-select-dropdown {
    z-index: 20000 !important;
  }
</style>
